<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <p class="c1" id="t1">文本1</p>
    <p class="c1" id="t2">
        <font size="10">文本2</font>
    </p>
    用户名：<input type="text" id="input1">
    <br>
    性别：
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女
        <br>
    政治面貌：
        <input type="radio" name="catory" value="群众">群众
        <input type="radio" name="catory" value="团员">团员
        <input type="radio" name="catory" value="党员">党员
        <br>

    <button id="radioBt">单选框信息</button>
    <button id="radioBt2">设置单选框</button>
    <br>
    <button id="btn1">按钮1</button>
    <button id="readText">读取标签内容</button>
    <button id="writeText">设置标签内容</button>
	<br>
    <br>
	  爱好:
	 <input type="checkbox"  name="hobby"  value="足球">足球
	 <input type="checkbox"  name="hobby"  value="篮球">篮球
	 <input type="checkbox"  name="hobby"  value="武术">武术
     <br>
	 <button  id="btnChk1" >读取多选框</button>
	 <button  id="btnChk2" >设置多选框</button>
	 <button  id="btnChkAll" >全选</button>
	 <button  id="btnChkDis" >全不选</button>
	 <button  id="btnChkRev" >反选</button>
	<br>
</body>
</html>

<script>
    /*
    // 让所有p标签的背景颜色设置为红色
    $("p").css("background","red");
    */

    // 让class为c1的设置为红色背景
    // $(".c1").css("background","red");
    $("#t1").css("background","red");

    // 设置按钮btn1的点击事件
    $("#btn1").click( function(){
        //按钮事件设置回调函数
        alert("按钮1被点击！");
    }
    );

    $("#readText").click(function(){
        // 只读取文本
        var s1 = $("#t2").text();
        alert(s1);
        // 会读取标签等信息
        var s2 = $("#t2").html();
        alert(s2);
        // 读取input中的内容
        var s3 = $("#input1").val();
        alert(s3);

    // 设置标签内容
    }
    );

    $("#writeText").click(function(){
        $("#t1").text("2024.1.11");
        $("#t2").html("<p style=\"color:aqua; font-size:20px;\">寒假学习！</p>");
        $("#input1").val("这是input标签输入框！");
    }
    );

    // 读取选中的单选框的选项信息
    $("#radioBt").click(function(){
        var s4 = $("input[type='radio'][name='gender']:checked").val();
        alert(s4);
        var s5 = $("input[type='radio'][name='catory']:checked").val();
        alert(s5);
    }
    );

    // 设置单选框i西南西
    $("#radioBt2").click(function(){
        $("input[type='radio'][name='gender'][value='男']").prop("checked","checkde");
        $("input[type='radio'][name='catory'][value='群众']").prop("checked","checkde");
    }
    );

    // 读取多选内容
    $("#btnChk1").click(function(){
        // 获取爱好多选框租中被选取的值
        // 获取多个被选中的多选框对象--包含多个--数组
        var objs = $("input[type='checkbox'][name='hobby']:checked");
        console.log(objs.length);
        var values='';
        objs.each(function(){
            values+=$(this).val()+" ";
        }
        );
        alert(values);
    }
    );

    // 设置多选内容
    $("#btnChk2").click(function(){ 
        $("input[type='checkbox'][name='hobby'][value='足球']").prop("checked","checked");
        $("input[type='checkbox'][name='hobby'][value='武术']").prop("checked","checked");
    }
    );

    // 全选
    $("#btnChkAll").click(function(){ 
        // 找到爱好中所有复选框对象--->多个  -->数组
        var objs=$("input[type='checkbox'][name='hobby']");
        objs.each(function(){
            $(this).prop("checked","checked");
        });
    }
    );

    // 全不选
    $("#btnChkDis").click(function(){ 
        // 找到爱好中所有复选框对象--->多个  -->数组
        var objs=$("input[type='checkbox'][name='hobby']");
        objs.each(function(){
            $(this).prop("checked",false);
        });
    }
    );

    // 反选
    $("#btnChkRev").click(function(){ 
        // 找到爱好中所有复选框对象--->多个  -->数组
        var objs=$("input[type='checkbox'][name='hobby']");
        objs.each(function(){
            // 判断当前多选框是否选中，选中则取消选中，未选中则选中
            if($(this).is(":checked")){
                $(this).prop("checked",false);
            } else {
                $(this).prop("checked",true);
            }
        });
    }
    );


</script>